import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import {
  SmileTwoTone,
  ScheduleTwoTone,
  ProfileTwoTone,
  RightOutlined,
  DownOutlined,
  CrownTwoTone,
} from '@ant-design/icons'
import { connect } from 'react-redux'
import { getUserInfo } from '../../redux/actions/user'
import './index.css'
import Top from '../../containers/Top'
import { Avatar } from 'antd'
import { openNotification, formatTime } from '../../util/util'
import { reqLogout, reqListOrders, reqCancelOrder } from '../../api'

class index extends Component {
  state = {
    // isHidden: new Array(3).fill(false),
    isHidden: new Array(4).fill(true),
    // 3-预约已取消 none 0-取消预约 2-诊断已完成 success
    myclass: ['', '', 'success', 'none'], 
    myType: ['取消预约', '', '诊断已完成', '预约已取消'],
    // 标记医生的状态 0-休息中 1-工作中
    doctorStatus: ['休息中', '工作中'],
    appointments: []
  }
  componentDidMount = async () => {
    await reqListOrders()
    const appointments = (await reqListOrders()).data || []
    this.setState({appointments})
    console.log('appointments', appointments)
  }
  notification = (n) => {
    if (!this.props.user.name && n !== 3) {
      openNotification({description: '请先登录'})
      return true
    }
    if (n === 1 && this.state.appointments.length === 0 && this.state.isHidden[n]) {
      openNotification({description: '暂无预约或网络繁忙'})
      return true
    } else if (n === 2 && this.state.isHidden[n]) {
      openNotification({description: '请从诊治医生处取得处方'})
      return true
    }
    return false
  }
  handleHidden = (n) => {
    const num = this.state.isHidden.indexOf(false)
    const isHidden = [...this.state.isHidden]
    if (this.notification(n, num)) {
      return
    }
    if (num === -1) {
      // 全部被隐藏——则点击谁就展示谁
      isHidden[n] = false
    } else {
      // 有显示的——则根据 num 和 n 的值进行处理
      if (n === num) { // 直接取反
        isHidden[n] = !isHidden[n]
      } else { // 隐藏 num，显示 n
        isHidden[num] = true
        isHidden[n] = false
      }
      // 点击另外的，则仅显示点击的
    }
    this.setState({isHidden})
  }
  handelLogin = async (e) => {
    if (this.props.user.name) {
      e.preventDefault()
      await reqLogout()
      this.props.getUserInfo({})
      openNotification({description: '已成功退出登录', type: 'info'})
      this.setState({isHidden: new Array(4).fill(true)})
    }
  }
  handleClick = async (index) => {
    let { status, sid } = this.state.appointments[index]
    sid += ''
    if (status === 0) {
      await reqCancelOrder({sid})
      const appointments = (await reqListOrders()).data || []
      this.setState({appointments})
      openNotification({description: '预约取消完成', type: 'info'})
    } else if (status === 3) {
      openNotification({description: '预约已经取消'})
    } else if (status === 2) {
      openNotification({description: '预约已经完成'})
    }
  }
  render() {
    const { isHidden, appointments, myclass, myType, doctorStatus } = this.state
    const { user } = this.props
    return (
      <div className="profile">
        <Top></Top>
        <NavLink className="p_header" to='/profile/login' onClick={this.handelLogin}>
          <Avatar src="/images/profile.png" className="p_pic"/>
          <span className="p_title">{user.name?'退出登录':'去登录'}</span>
        </NavLink>
        <div className="p_items">
          <div className="p_item" onClick={() => this.handleHidden(0)}>
            <SmileTwoTone />
            <div className="title">个人信息</div>
            <RightOutlined className="right" hidden={!isHidden[0]}/>
            <DownOutlined className="right" hidden={isHidden[0]}/>
          </div>
          <div className="content" hidden={isHidden[0]}>
            <table className="table">
              <tbody>
                <tr><td>姓名</td><td>{user && user.name}</td></tr>
                <tr><td>性别</td><td>{user && user.sex}</td></tr> 
                <tr><td>出生日期</td><td>{user && user.date}</td></tr> 
                <tr><td>年龄</td><td>{user && user.age}岁</td></tr>
              </tbody>
            </table>
          </div>
          <div className="p_item" onClick={() => this.handleHidden(1)}>
            <ScheduleTwoTone />
            <div className="title">我的预约</div>
            <RightOutlined className="right" hidden={!isHidden[1]}/>
            <DownOutlined className="right" hidden={isHidden[1]}/>
          </div>
          <div className="content" hidden={isHidden[1]}>
          {
            appointments.map((appointment, index) => {
              const { doctor, status } = appointment
              return (
                <div className={`tables ${myclass[status]}`}>
                  <table className="table">
                    <tbody>
                      <tr><td>医生</td><td>{doctor && doctor.name}</td></tr>
                      <tr><td>性别</td><td>{doctor.sex}</td></tr> 
                      <tr><td>科室</td><td>{doctor.department}</td></tr> 
                      <tr><td>介绍</td><td>{doctor.background}</td></tr> 
                      <tr><td>状态</td><td>{doctorStatus[doctor.status]}</td></tr>
                      <tr><td>预约日期</td><td>{formatTime(appointment.orderDate)}</td></tr>
                    </tbody>
                  </table>
                  <span className={`click ${myclass[status]}`}
                    onClick={() => this.handleClick(index)}
                  >{myType[status]}</span>
                </div>
              )
            })
          }
          </div>
          
          <div className="p_item" onClick={() => this.handleHidden(2)}>
            <ProfileTwoTone />
            <div className="title">我的处方</div>
            <RightOutlined className="right" hidden={!isHidden[2]}/>
            <DownOutlined className="right" hidden={isHidden[2]}/>
          </div>
          <div className="content" hidden={isHidden[2]}>
            我的处方
          </div>
          
          <div className="p_item" onClick={() => this.handleHidden(3)}>
            <CrownTwoTone />
            <div className="title">关于我们</div>
            <RightOutlined className="right" hidden={!isHidden[3]}/>
            <DownOutlined className="right" hidden={isHidden[3]}/>
          </div>
          <div className="content" hidden={isHidden[3]}>
            <table className="table">
              <tbody>
                <tr><td>不安现状？</td><td>跨个专业！</td></tr>
                <tr className="name"><td>我们是谁？</td><td>全是大佬！</td></tr>
                <tr><td>王昊龙</td><td>大佬</td></tr> 
                <tr><td>周杨</td><td>大佬</td></tr> 
                <tr><td>欧阳佟鑫</td><td>大佬</td></tr>
                <tr><td>文伟浩</td><td>大佬</td></tr>
                <tr><td>刘诗云</td><td>大佬</td></tr>
                <tr><td>王韵淇</td><td>大佬</td></tr>
                <tr><td>桑龙龙</td><td>大佬</td></tr>
                <tr><td>田泽远</td><td>大佬</td></tr>
                <tr><td>贾语璇</td><td>大佬</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    )
  }
}

export default connect(
  state => ({
    user: state.user
  }),
  {
    getUserInfo
  }
)(index)